<template>
  <div>
    <!-- :load="load"  :row-class-name="tableRowClassName" -->
    <el-card style="margin: 20px 20px;">
      <el-table
        :data="category1List"
        style="width:90%;"
        border
        lazy
        :load="load"
        :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
        :row-key="getRowKey"
      >
        <el-table-column
          prop="id"
          label="分类ID"
          width="150"
        />
        <el-table-column
          prop="name"
          label="分类名称"
        />
        <el-table-column label="操作" width="250" align="center">
          <template #header>
            <el-input placeholder="按Enter键添加一级分类" />
          </template>
          <!--  -->
          <template v-slot="{row}">
            <el-button title="添加子分类" size="mini" type="primary" icon="el-icon-plus" />
            <el-button title="修改分类" size="mini" type="primary" icon="el-icon-edit-outline" />
            <el-button title="删除分类" size="mini" type="danger" icon="el-icon-delete" />
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

<script>
import { mapGetters, mapState, mapActions } from 'vuex'

export default {
  name: 'Category',
  data() {
    return {
      id: '',
      name: ''
    }
  },
  computed: {
    ...mapGetters('category', ['category1Id', 'category2Id', 'category3Id']),
    ...mapState('category', ['category1List', 'category2List', 'category3List'])
  },
  mounted() {
    this.getCategory1List()
  },
  methods: {
    ...mapActions('category', ['getCategory1List', 'getCategory2List', 'getCategory3List']),
    async load(row, treeNode, resolve) {
      if (row.level === 1) {
        this.$store.dispatch('category/getCategory2List', row.id)
        resolve(this.category2List)
      } else if (row.level === 2) {
        this.$store.dispatch('category/getCategory3List', row.id)
        resolve(this.category3List)
      }
    },
    getRowKey(row) {
      return row.level + '-' + row.id
    }
  }

}

</script>

<style  scoped>

.demo-table-expand {
    font-size: 0;
  }
  .demo-table-expand label {
    width: 90px;
    color: #99a9bf;
  }
  .demo-table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 50%;
  }
</style>
